<!--
 * @Author: wuzhen
 * @Date: 2020-01-14 13:17:04
 * @LastEditors: wuzhen
 * @LastEditTime: 2020-04-18 13:16:11
 * @Description: 头部注释
 -->
<template>
  <div style="height:100%;overflow:hidden;position:relative;flex:auto">
    <div class="msg-scroll-bar">
      <div class="chat-msg">
        <div v-for="(item, index) in msgData" :key="index">
          <!-- 撤回一条消息 -->
          <p class="chat-tips" v-if="item.msgtype === 2016">
            "{{ item.fromid !== userInfo.userid ? item.name : $t("you") }}"
            {{ $t("con_recall") }}
          </p>
          <!-- 撤回全部消息 -->
          <p
            class="chat-tips"
            v-else-if="item.msgtype === 2017"
            style="display:none;"
          ></p>
          <!-- 群禁言，解除禁言 -->
          <p class="chat-tips" v-else-if="item.msgtype === 1011">
            {{ item.content && item.content.content }}
          </p>
          <div
            class="chat-msg-item flex"
            :class="[
              `chat-msg-item_${item.fromid === userInfo.userid ? 'r' : 'l'}`
            ]"
            v-else
          >
            <div class="personal-img">
              <img
                :src="icon_notice"
                v-if="chatInfo.msgkind === 10"
                style="width:100%"
              />
              <img
                :src="iconPersonal"
                v-else-if="chatInfo.grouptype === 20"
                style="width:100%"
              />
              <wz-img
                type="face"
                :src="
                  item.fromid === userInfo.userid ? userInfo.face : item.face
                "
                v-else
              />
            </div>
            <!-- 如果是群并且不是自己 -->
            <p
              class="chat-name"
              v-if="chatting.msgkind === 30 && item.fromid !== userInfo.userid"
            >
              {{
                chatInfo.grouptype === 20
                  ? $t("anonymous") + $t("user") + item.annoyindex
                  : item.name
              }}
            </p>
            <div
              class="chat-info"
              :style="{
                marginTop:
                  chatting.msgkind === 30 && item.fromid !== userInfo.userid
                    ? '25px'
                    : '0px'
              }"
              @contextmenu.prevent="
                e => {
                  openMenu(e, item);
                }
              "
            >
              <div
                class="spin-load"
                v-if="
                  !item.msgStatus &&
                    item.msgStatus !== -1 &&
                    item.fromid === userInfo.userid
                "
              >
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
              </div>
              <div
                class="icon-fail"
                v-if="item.msgStatus === -1 && item.fromid === userInfo.userid"
              >
                <Icon type="ios-information-circle" size="20" color="#ed4014" />
              </div>
              <div class="flex-item">
                <!-- 文本内容 -->
                <div class="msg-text msg-bg" v-if="item.msgtype === 1001">
                  <!-- @所有人，群通知 -->
                  <p
                    v-if="
                      item.content.mentionedInfo &&
                        item.content.mentionedInfo.type === 1
                    "
                  >
                    @{{ $t("all") }}
                  </p>
                  <p
                    v-html="
                      item.content.content
                        .replace(/\n/g, '<br/>')
                        .replace(/\[([^\]]+)\]/g, i => {
                          return emojs.includes(i)
                            ? `<img style='width: 30px;height: 30px;display: inline-block;' class='emoj-img' src='/static/Chat_Faces/${i}.imageset/${i}@2x.png'>`
                            : `${i}`;
                        })
                    "
                  ></p>
                  <div class="flex" style="align-items: center;">
                    <p class="time flex-item">
                      <span>{{ $fmtMoment(item.createtime, "HH:mm") }}</span>
                    </p>
                    <img
                      :src="item.msgStatus === 1 ? icon_isSend : icon_isRead"
                      class="icon-status"
                      v-if="
                        item.msgStatus &&
                          item.msgStatus !== -1 &&
                          item.msgkind !== 30 &&
                          item.fromid === userInfo.userid
                      "
                    />
                  </div>
                </div>
                <!-- 位置信息不支持 -->
                <div class="msg-text msg-bg" v-else-if="item.msgtype === 1005">
                  <p>
                    <Icon type="ios-alert" size="18" />{{ $t("noSupport") }}
                  </p>
                  <div class="flex" style="align-items: center;">
                    <p class="time flex-item">
                      <span>{{ $fmtMoment(item.createtime, "HH:mm") }}</span>
                    </p>
                  </div>
                </div>
                <!-- 文件类型 -->
                <div class="msg-file msg-bg" v-else-if="item.msgtype === 1003">
                  <div class="flex" style="align-item:center">
                    <div class="flex-item">
                      <p class="file-name">
                        {{ item.content && item.content.name }}
                      </p>
                      <div class="flex" style="align-items: center;">
                        <p class="file-size">
                          {{ $renderSize(item.content.size) }}
                        </p>
                      </div>
                    </div>
                    <div class="file-icon">
                      <img
                        :src="
                          require(`@/assets/image/file/${$formatFileType(
                            item.content.name
                          )}.png`)
                        "
                      />
                    </div>
                  </div>
                  <div class="flex" style="align-items: center;">
                    <p class="time flex-item">
                      <span>{{ $fmtMoment(item.createtime, "HH:mm") }}</span>
                    </p>
                    <img
                      :src="item.msgStatus === 1 ? icon_isSend : icon_isRead"
                      class="icon-status"
                      v-if="
                        item.msgStatus &&
                          item.msgStatus !== -1 &&
                          item.msgkind !== 30 &&
                          item.fromid === userInfo.userid
                      "
                    />
                  </div>
                </div>
                <!-- 小视频 -->
                <div class="msg-video" v-else-if="item.msgtype === 1004">
                  <img :src="item.content.picUrl" style="max-width:150px" />
                  <div class="paly-btn" @click.stop="onPlayVideo(item)">
                    <span>
                      <Icon
                        type="md-arrow-dropright-circle"
                        size="36"
                        color="#fff"
                      />
                    </span>
                  </div>
                  <div class="flex" style="align-items: center;">
                    <p v-if="item.msgtype === 1012" class="card-p">
                      {{ $t("user_card") }}
                    </p>
                    <p class="time flex-item">
                      <span>{{ $fmtMoment(item.createtime, "HH:mm") }}</span>
                    </p>
                    <img
                      :src="item.msgStatus === 1 ? icon_isSend : icon_isRead"
                      class="icon-status"
                      v-if="
                        item.msgStatus &&
                          item.msgStatus !== -1 &&
                          item.msgkind !== 30 &&
                          item.fromid === userInfo.userid
                      "
                    />
                  </div>
                </div>
                <!-- 音频内容 -->
                <div
                  class="msg-audio msg-bg"
                  :class="[item.isRead ? 'isRead' : '']"
                  :style="{ width: (item.content.duration * 500) / 60 + 'px' }"
                  v-else-if="item.msgtype === 1009"
                  @click.stop="onPlayAudio(item)"
                >
                  <div class="audio-info">
                    <div class="wifi-symbol">
                      <div class="wifi-circle first"></div>
                      <div
                        class="wifi-circle second"
                        :class="{ active: item.isPlay }"
                      ></div>
                      <div
                        class="wifi-circle third"
                        :class="{ active: item.isPlay }"
                      ></div>
                    </div>
                    <span class="duration">{{ item.content.duration }}''</span>
                  </div>
                  <div class="flex" style="align-items: center;">
                    <p class="time flex-item">
                      <span>{{ $fmtMoment(item.createtime, "HH:mm") }}</span>
                    </p>
                    <img
                      :src="item.msgStatus === 1 ? icon_isSend : icon_isRead"
                      class="icon-status"
                      v-if="
                        item.msgStatus &&
                          item.msgStatus !== -1 &&
                          item.msgkind !== 30 &&
                          item.fromid === userInfo.userid
                      "
                    />
                  </div>
                </div>
                <!-- 图片内容 -->
                <div
                  class="msg-img"
                  v-viewer="{ navbar: false, title: false }"
                  v-else-if="item.msgtype === 1010"
                >
                  <img :src="item.content.fileUrl" />
                  <div class="flex" style="align-items: center;">
                    <p v-if="item.msgtype === 1012" class="card-p">
                      {{ $t("user_card") }}
                    </p>
                    <p class="time flex-item">
                      <span>{{ $fmtMoment(item.createtime, "HH:mm") }}</span>
                    </p>
                    <img
                      :src="item.msgStatus === 1 ? icon_isSend : icon_isRead"
                      class="icon-status"
                      v-if="
                        item.msgStatus &&
                          item.msgStatus !== -1 &&
                          item.msgkind !== 30 &&
                          item.fromid === userInfo.userid
                      "
                    />
                  </div>
                </div>
                <!-- 名片内容 -->
                <div
                  class="msg-card"
                  v-else-if="item.msgtype === 1012"
                  @click.stop="e => openUserInfo(e, item)"
                >
                  <div class="flex">
                    <div class="personal-image">
                      <img :src="item.content.targetPic" />
                    </div>
                    <div class="flex-item">
                      <h2 class="personal-name">
                        {{ item.content.targetname }}
                      </h2>
                      <p class="personal-id">
                        {{ $t("user_id") }}:{{ item.content.targetid }}
                      </p>
                    </div>
                  </div>
                  <div class="flex" style="align-items: center;margin-top:5px;">
                    <p class="card-p">{{ $t("user_card") }}</p>
                    <p class="time flex-item" style="margin:0;">
                      <span>{{ $fmtMoment(item.createtime, "HH:mm") }}</span>
                    </p>
                    <img
                      :src="item.msgStatus === 1 ? icon_isSend : icon_isRead"
                      class="icon-status"
                      v-if="
                        item.msgStatus &&
                          item.msgStatus !== -1 &&
                          item.msgkind !== 30 &&
                          item.fromid === userInfo.userid
                      "
                    />
                  </div>
                </div>
                <!-- 通知公告 -->
                <div
                  class="msg-notice msg-bg"
                  v-else-if="item.msgtype === 1014"
                >
                  <p>{{ item.content && item.content.content }}</p>
                  <div class="flex" style="align-items: center">
                    <p class="time flex-item">
                      <span>{{ $fmtMoment(item.createtime, "HH:mm") }}</span>
                    </p>
                  </div>
                </div>
              </div>
            </div>
            <div
              class="icon-download"
              v-if="
                item.msgtype === 1003 && item.msgStatus && item.msgStatus !== -1
              "
            >
              <img
                :src="icon_download"
                alt="下载"
                title="下载"
                @click.stop="onDownLoad(item)"
              />
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="input-tips" v-if="chatting.status">
      <p v-if="chatting.status === 10">{{ $t("other_typing") }}...</p>
    </div>
    <context-menu
      :context-menu="contextMenu"
      :left="contextLeft"
      :top="contextTop"
      @on-close="onCloseContextMenu"
      @on-click="onClickContextMenu"
      v-if="showContextMenu"
    ></context-menu>
    <!-- 视频预览 -->
    <Modal v-model="showModal" footer-hide :title="$t('pre_video')">
      <video
        :src="videoUrl"
        autoplay
        controls
        style="width:100%;height:500px;background:#000"
        v-if="showModal"
      ></video>
    </Modal>
    <!-- 用户信息 -->
    <user-info
      :left="userLeft"
      :top="userTop"
      @on-close="onCloseUserInfo"
      ref="userInfo"
      v-show="showUserInfo"
    ></user-info>
    <!-- 语音播放 -->
    <audio ref="audio"></audio>
  </div>
</template>
<script>
import { Message, Modal, Icon } from "view-design";
import ContextMenu from "@/components/ContextMenu/index.vue";
import UserInfo from "@/components/UserInfo/index.vue";
import emojs from "@/assets/Chat_Faces";
export default {
  components: {
    ContextMenu,
    UserInfo,
    Modal,
    Icon
  },
  data() {
    return {
      icon_download: require("@/assets/image//icon_download.png"),
      icon_isSend: require("@/assets/image/icon_isSend.png"),
      icon_isRead: require("@/assets/image/icon_isRead.png"),
      iconPersonal: require("@/assets/image/icon_personal.png"),
      icon_notice: require("@/assets/image/icon_notice.png"),
      showContextMenu: false,
      contextMenu: [
        {
          label: this.$t("btn_copy"),
          value: "copy"
        },
        {
          label: this.$t("btn_delete"),
          value: "delete"
        },
        {
          label: this.$t("btn_recall"),
          value: "recall"
        }
      ],
      contextLeft: 0,
      contextTop: 0,
      videoUrl: "",
      showModal: false,
      userLeft: 0,
      userTop: 0,
      showUserInfo: false
    };
  },
  computed: {
    msgData() {
      this.initScroll();
      return [...this.$store.getters.getChatMsg(this.chatting.id)];
    },
    chatInfo() {
      if (this.chatting.msgkind === 30) {
        return this.groups.find(v => v.id === this.chatting.id);
      } else if (this.chatting.msgkind === 20) {
        return this.friends.find(v => v.id === this.chatting.id);
      } else {
        return this.chatting;
      }
    },
    emojs() {
      const str = emojs.map(v => `[${v.name}]`);
      return str;
    }
  },
  mounted() {
    this.msgScroll = document.querySelector(".msg-scroll-bar");
    window.addEventListener("scroll", this.msgScrollFun, true);
  },
  activated() {
    this.initScroll();
  },
  methods: {
    // 初始化滚动位置
    initScroll() {
      setTimeout(() => {
        this.$nextTick(() => {
          this.msgScroll.scrollTop = 10000000000;
        });
      }, 20);
    },
    // 右键点击
    openMenu(e, item) {
      this.contextLeft = e.clientX - this.screen.x;
      this.contextTop = e.clientY - this.screen.y;
      this.$emit("close-user-info");
      this.$bus.$emit("hideBarPopup");
      this.currentMsg = item;
      if (item.fromid !== this.userInfo.userid) {
        this.contextMenu = [
          {
            label: this.$t("btn_copy"),
            value: "copy"
          },
          {
            label: this.$t("btn_delete"),
            value: "delete"
          }
        ];
      } else {
        this.contextMenu = [
          {
            label: this.$t("btn_copy"),
            value: "copy"
          },
          {
            label: this.$t("btn_delete"),
            value: "delete"
          },
          {
            label: this.$t("btn_recall"),
            value: "recall"
          }
        ];
      }
      this.showContextMenu = true;
    },
    // 点击右键选项
    onClickContextMenu(type) {
      switch (type) {
        case "copy": // 拷贝
          this.showContextMenu = false;
          const copyText =
            this.currentMsg.msgtype === 1001
              ? this.currentMsg.content.content
              : this.currentMsg.content.fileUrl;
          this.$copyText(copyText).then(() => {
            Message.success(this.$t("ok_copy"));
          });
          break;
        case "delete": // 删除
          this.chatMsg.splice(
            this.chatMsg.findIndex(
              v => v.messageid === this.currentMsg.messageid
            ),
            1
          );
          this.set_chatMsg(this.chatMsg);
          this.chatUsers.forEach(v => {
            if (v.id === this.chatting.id) {
              const array = this.chatMsg.filter(m => m.id === v.id);
              if (array.length) {
                v.content = array[array.length - 1].content;
              } else {
                v.content = "";
              }
            }
          });
          this.set_chatUsers(this.chatUsers);
          this.showContextMenu = false;
          break;
        case "recall": // 撤销
          const msg = encodeURIComponent(
            JSON.stringify({
              targetid: this.chatting.id,
              msgkind: this.chatting.msgkind,
              msgtype: 2016,
              content: JSON.stringify({
                recallmsgid: this.currentMsg.messageid
              })
            })
          );
          this.$imWebSocket.sendMsg(msg);
          this.chatMsg.splice(
            this.chatMsg.findIndex(
              v => v.messageid === this.currentMsg.messageid
            ),
            1,
            {
              ...this.currentMsg,
              ...{
                content: {
                  content: this.$t("con_recall")
                },
                msgtype: 2016
              }
            }
          );
          this.set_chatMsg(this.chatMsg);
          this.chatUsers.forEach(v => {
            if (v.id === this.chatting.id) {
              const array = this.chatMsg.filter(m => m.id === v.id);
              if (array.length) {
                v.content = array[array.length - 1].content;
              }
            }
          });
          this.set_chatUsers(this.chatUsers);
          this.showContextMenu = false;
          break;
        default:
          break;
      }
    },
    // 关闭右键点击菜单
    onCloseContextMenu() {
      this.showContextMenu = false;
    },
    // 播放视频
    onPlayVideo(item) {
      this.videoUrl = item.content.fileUrl;
      this.showModal = true;
    },
    // 播放音频
    onPlayAudio(item) {
      this.msgData.forEach(v => {
        v.isPlay = false;
      });
      item.isPlay = true;
      item.isRead = true;
      this.$refs["audio"].src = item.content.fileUrl;
      this.$nextTick(() => {
        this.$refs["audio"].play();
      });
      this.chatMsg.forEach(v => {
        if (v.messageid === item.messageid) {
          v.isRead = true;
        }
      });
      this.set_chatMsg(this.chatMsg);
      setTimeout(() => {
        item.isPlay = false;
        this.set_chatMsg(this.chatMsg);
      }, item.content.duration * 1000);
    },
    // 查看群组用户详情
    openUserInfo(e, data) {
      this.userLeft = e.clientX - this.screen.x - 310;
      this.userTop = e.clientY - this.screen.y + 10;
      this.$bus.$emit("hideBarPopup");
      this.showUserInfo = true;
      this.$refs["userInfo"].getData(data.content.targetid);
    },
    onCloseUserInfo() {
      this.showUserInfo = false;
    },
    // 附件下载
    onDownLoad(item) {
      const fileUrl = item.content.fileUrl;
      window.location.href = fileUrl;
    },
    msgScrollFun() {
      // let a = this.msgScroll.scrollHeight;
      // let b = this.msgScroll.clientHeight;
      // let c = this.msgScroll.scrollTop;
      // console.log("滚动条" + a);
      // console.log("可视区" + b);
      // console.log("距离顶部" + c);
    }
  },
  watch: {
    chatting() {
      this.initScroll();
    }
  }
};
</script>
<style lang="less" scoped>
.chat {
  .input-tips {
    padding: 5px 20px;
    position: absolute;
    bottom: 0px;
    left: 0;
    right: 0;
    p {
      font-size: 10px;
      color: #999;
    }
  }
  .msg-scroll-bar {
    height: 100%;
    overflow: scroll;
  }
  &-tips {
    font-size: 12px;
    color: #999;
    text-align: center;
    padding: 10px 0;
  }
  &-msg {
    flex: auto;
    padding: 20px 10px 20px 20px;
    min-height: 100%;
    box-sizing: border-box;
    p {
      word-break: break-all;
    }
    &-item {
      margin-bottom: 20px;
      position: relative;
      .personal {
        &-img {
          width: 38px;
          height: 38px;
          border-radius: 4px;
          overflow: hidden;
          margin-right: 10px;
        }
      }
      .chat-name {
        position: absolute;
        left: 50px;
        top: 0;
      }
      .icon-download {
        margin: 0 10px;
        img {
          position: relative;
          top: 50%;
          margin-top: -9px;
          width: 18px;
          height: 18px;
          cursor: pointer;
        }
      }
      .chat-info {
        max-width: 80%;
        display: flex;
        align-items: center;
        .icon-fail {
          margin: 0 10px;
        }
        .spin-load {
          width: 20px;
          height: 20px;
          position: relative;
          animation: ball-spin-fade-rotating-rotate 2s infinite linear;
          margin: 0 10px;
          div {
            position: absolute;
            margin: 2px;
            border-radius: 0;
            width: 2px;
            height: 6px;
            margin-top: -3px;
            margin-left: -2px;
            background-color: currentColor;
            animation: line-spin-fade-rotating 1s infinite ease-in-out;
            &:nth-child(1) {
              top: 15%;
              left: 50%;
              transform: rotate(0deg);
              animation-delay: -1.125s;
            }
            &:nth-child(2) {
              top: 25.2512626585%;
              left: 74.7487373415%;
              transform: rotate(45deg);
              animation-delay: -1.25s;
            }
            &:nth-child(3) {
              top: 50%;
              left: 85%;
              transform: rotate(90deg);
              animation-delay: -1.375s;
            }
            &:nth-child(4) {
              top: 74.7487373415%;
              left: 74.7487373415%;
              transform: rotate(135deg);
              animation-delay: -1.5s;
            }
            &:nth-child(5) {
              top: 84.9999999974%;
              left: 50.0000000004%;
              transform: rotate(180deg);
              animation-delay: -1.625s;
            }
            &:nth-child(6) {
              top: 74.7487369862%;
              left: 25.2512627193%;
              transform: rotate(225deg);
              animation-delay: -1.75s;
            }
            &:nth-child(7) {
              top: 49.9999806189%;
              left: 15.0000039834%;
              transform: rotate(270deg);
              animation-delay: -1.875s;
            }
            &:nth-child(8) {
              top: 25.2506949798%;
              left: 25.2513989292%;
              transform: rotate(315deg);
              animation-delay: -2s;
            }
          }
        }
        .msg {
          &-bg {
            background: #fff;
            padding: 5px 20px 5px 10px;
            position: relative;
            border-radius: 0px 14px 14px 14px;
            width: 100%;
          }
          &-text {
            .emoj-img {
              width: 30px;
              height: 30px;
              display: inline-block;
            }
          }
          &-file {
            width: 250px;
            padding: 10px !important;
            position: relative;
            .time {
              margin-right: 0;
            }
            .file {
              &-name {
                font-size: 16px;
              }
              &-size {
                font-size: 10px;
                color: #afafaf;
              }
              &-icon {
                height: 50px;
                margin-left: 10px;
                img {
                  height: 50px;
                }
              }
            }
          }
          &-video {
            width: 150px;
            height: 150px;
            overflow: hidden;
            position: relative;
            .paly-btn {
              position: absolute;
              cursor: pointer;
              left: 0;
              right: 0;
              top: 0;
              bottom: 0;
              text-align: center;
              line-height: 100%;
              background: rgba(0, 0, 0, 0.25);
              span {
                position: relative;
                top: 50%;
                transform: translateY(-50%);
                display: inline-block;
              }
            }
            .flex {
              position: absolute;
              bottom: 0;
              right: 15px;
              z-index: 1000;
            }
          }
          &-audio {
            position: relative;
            cursor: pointer;
            min-width: 68px;
            &.isRead:after {
              display: none;
            }
            &:after {
              display: block;
              content: "";
              width: 6px;
              height: 6px;
              position: absolute;
              right: -5px;
              top: 0;
              background: red;
              border-radius: 50%;
            }
            .audio-info {
              display: flex;
            }
            .wifi-symbol {
              width: 30px;
              height: 30px;
              box-sizing: border-box;
              overflow: hidden;
              transform: rotate(135deg);
              .first {
                width: 14px;
                height: 10px;
                background: #cccccc;
                top: 26px;
                left: 26px;
              }
              .second {
                width: 20px;
                height: 20px;
                top: 21px;
                left: 21px;
                &.active {
                  animation: fadeInOut 1s infinite 0.2s;
                }
              }
              .third {
                width: 26px;
                height: 26px;
                top: 16px;
                left: 16px;
                &.active {
                  animation: fadeInOut 1s infinite 0.2s;
                }
              }
            }
            .wifi-circle {
              border: 2px solid #999999;
              border-radius: 50%;
              position: absolute;
            }
            .duration {
              position: absolute;
              left: 25px;
              top: 5px;
            }
          }
          &-img {
            height: 150px;
            width: 150px;
            overflow: hidden;
            position: relative;
            img {
              width: 150px;
              height: 150px;
              display: block;
              cursor: zoom-in;
              object-fit: cover;
            }
            .flex {
              position: absolute;
              bottom: 0;
              right: 15px;
              z-index: 1000;
            }
          }
          &-card {
            background: #fff;
            padding: 10px;
            align-items: center;
            width: 200px;
            cursor: pointer;
            .flex-item {
              overflow: hidden;
            }
            .personal {
              &-image {
                width: 48px;
                height: 48px;
                border-radius: 5px;
                overflow: hidden;
                margin-right: 10px;
                img {
                  width: 48px;
                  height: 48px;
                }
              }
              &-name {
                font-size: 16px;
                font-weight: normal;
                text-overflow: ellipsis;
                white-space: nowrap;
                overflow: hidden;
                margin-bottom: 5px;
              }
              &-id {
                font-size: 12px;
              }
            }
          }
        }
        .card-p {
          font-size: 10px;
          color: #afafaf;
        }
        .time {
          text-align: right;
          font-size: 10px;
          color: #afafaf;
          margin-right: -10px;
          span {
            transform: scale(0.9);
          }
        }
      }
      &_r {
        flex-direction: row-reverse;
        .personal {
          &-img {
            margin: 0 0 0 10px;
          }
        }
        .chat-info {
          .msg {
            &-bg {
              background: #c7ebd6;
              border-radius: 14px 0px 14px 14px;
              padding: 5px 10px 5px 10px;
            }
            &-audio {
              .audio-info {
                display: flex;
                align-items: right;
                flex-direction: row-reverse;
                .wifi-symbol {
                  transform: rotate(135deg);
                  .first {
                    left: initial;
                    top: initial;
                    bottom: 26px;
                    right: 26px;
                  }
                  .second {
                    left: initial;
                    top: initial;
                    bottom: 21px;
                    right: 21px;
                  }
                  .third {
                    left: initial;
                    top: initial;
                    bottom: 16px;
                    right: 16px;
                  }
                }
              }
              .duration {
                left: initial;
                right: 25px;
              }
            }
            &-video {
              .flex {
                left: 15px;
                right: 0;
              }
            }
            &-img {
              .flex {
                left: 15px;
                right: 0;
              }
            }
          }
          .icon-status {
            width: 15px !important;
            height: 15px !important;
          }
          .time {
            color: #5ed485;
            margin-right: 0px;
          }
        }
      }
    }
  }
}
@keyframes fadeInOut {
  0% {
    opacity: 0; /*初始状态 透明度为0*/
  }
  100% {
    opacity: 1; /*结尾状态 透明度为1*/
  }
}
@keyframes ball-spin-fade-rotating-rotate {
  100% {
    transform: rotate(360deg);
  }
}
@keyframes line-spin-fade-rotating {
  50% {
    opacity: 0.2;
  }
  100% {
    opacity: 1;
  }
}
</style>
